/*CSS PAGINA SALES*/

@import "mixins";

#sales {

	.row { 
		
		&.center {
			margin:75px 0;
			@media (max-width: 460px) {margin-bottom: 0px;}
			h1 {
				font-family: @font-Roboto;
				font-weight: 700;
				@media (max-width: 460px) {font-size: 24px;}
			}
			h2 {
				font-family: @font-Roboto;
				font-weight: 700;
				font-size: 36px;
				margin-bottom: 0;
				@media (max-width: 460px) {font-size: 24px;}
			}

			#tabs_to_content {
				margin-top: 25px;
				@media (max-width: 460px) {display:none;}
				a {
					font-family: @font-Roboto;
					font-weight: 400;
					background: #a7a8a8;
					color: #ffffff;
					border-radius: 0px;
					padding: 4px 12px;
					border: none;
					margin-right: 0.5%;
					display: block;
					float: left;
					width: 24.7%;
					&:last-child {margin-right: 0px;}
					&.active {background: #1da3a8;}
				}
			}

			span {
				&.underline {
					text-decoration: underline;
					font-weight: 700;
					font-family: @font-Roboto;
					font-size: 36px;
					@media (max-width: 460px) {font-size: 24px;}
				}
			}

			p {
				&.lead {
					font-weight: 700;
					font-family: @font-Roboto;
				}
			}
			.btn-prenota {
				width: 290px;
				margin: 50px auto 0;
				font-family: @font-Roboto;
				font-weight: 700;
				border: none;
				padding: 12px 23px;
				font-size: 15px;
				a {
					font-family: @font-Roboto;

				}
			}
		}

		&.vidTxt {
			margin-bottom: 80px !important;
			.txtSX {
				margin-right: 20px; 
				@media (max-width: 460px) {margin-right: 0px; }
			}
			.txtDX {
				margin-left: 20px; 
				@media (max-width: 460px) {margin-left: 0px; }
			}
			.panel {
				/*height: 325px;*/
				padding: 10px 20px;
				border-radius: 0px;
				-webkit-box-shadow: 0;
				box-shadow:0;
				font-size: 12px !important;

				@media (max-width: 460px) {
					width: 100%;
					overflow: hidden;
					font-size: 14px !important;

					.btn-prenota {
						width: 100%;
					}

					&.txtDX {
						margin-left: 0;
					}
				}

				p {
					font-family: @font-Roboto;
					font-weight: 400;
					margin-bottom: 30px;
					font-size: 14px !important;
				}

				ul {
					margin-top: 0;
					margin-bottom: 10px;
					margin-left: 0 !important;
					//padding-left: 0px;
					line-height: 18px;
					
					padding-left: 18px;
					list-style-type: disc;
					

					li {
						font-family: @font-Roboto;
						font-weight: 400;
						margin-bottom: 5px;
					}
				}
				
				article {
					width: 100%;
					overflow: hidden;
					height: 252px;
					&.viewMore {
						height: auto;
						overflow: visible;
					}

					p {
						font-family: @font-Roboto;
						font-weight: 400;
						font-size: 14px !important;
						&.more {
							margin: 20px 0 14px 0; 
							a {
								font-family: @font-Roboto;
								text-decoration: underline;
								color: #c20032;
								font-weight: 400;
							}
						}
					}

					header {
						margin-bottom: 15px;
						h2 {
							font-family: @font-Roboto;
							color: #1da3a8;
							font-weight: bold;
							font-size: 24px;
						}

					}

					h3 {
						margin-bottom: 20px ;
						font-family: @font-Roboto;
						font-weight: 700;
						font-size: 20px;
					}

				}

			}
			.vendor {
				.container-video {
					width: 100% !important;
					min-width: 100% !important;
					position: relative !important;
					padding: 0 !important;
					height: 325px !important;

					@media (max-width: 460px) {height: 173px !important;}

					.fluid-width-video-wrapper {
						width: 100% !important;
						position: relative !important;
						padding: 0 !important;
						padding-top:50% !important;
						height: 100% !important;
						iframe, object, embed {
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
							border:0px;
						}
					}
				}
				.btn-prenota {
					width: auto;
					float: right;
					margin-top: 25px;
					&.left {
						float: left;
					}
					@media (max-width: 460px) {width: 100%;}
					a {
						font-family: @font-Roboto;
						border-radius: 0px;
						background: #1da3a8;
						text-transform: uppercase;
						font-weight: 700;
						border: none;
						padding: 12px 23px;
						font-size: 15px;
					}
				}
			}
		}

	}
	
	.row.center.last {margin-bottom: 0;}


	.row.vidTxt .vendor	.btn-prenota a:link, .row.center .btn-prenota a:link,
	.row.vidTxt .vendor	.btn-prenota a:visited, .row.center .btn-prenota a:visited {
		color: #ffffff;
	}

	.row.vidTxt .vendor .container-video .fluid-width-video-wrapper {

	}


	.video-well.well{
		-webkit-border-radius:0px;
		-moz-border-radius:0px;
		border-radius:0px;
	}

	.content_block_small {
		float: left;
		width: 90%;
		margin: 50px 5%;
	}

	.content_block_small .panel-skill {
		width: 150px;
		height: 140px;
		float: left;
		margin: 0 7px;
		overflow: visible;
		margin-bottom: 30px;
		background: #fff;
		border-radius: 20px;
		@media (max-width: 460px) {
			width: 50%;
		}
		@media (max-width: 1023px) {
			width: 115px;
			margin: 15px 5px;
		}
	}

	.content_block_small .panel-skill .thumb {
		position: relative;
		top: -12px;
		width: 120px;
		height: 100px;
		margin: 0 auto;
		background-image: url("../images/bg_small_panel.png");
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;
		background-position: center;
		i {
			background-image: url("../images/icone_sales.png");
			background-repeat: no-repeat;
			display: block;
			width: 90px;
			height: 100%; 
			margin: 0 15px;
			&.icona-videomaker {background-position: 24px 0;}
			&.icona-italia  {background-position: -60px 0;}
			&.icona-montaggio  {background-position: -146px 0;}
			&.icona-correction  {background-position: -240px 0;}
			&.icona-infografica  {background-position: -343px 0;}
			&.icona-nota  {background-position: -436px 0;}
			&.icona-geolocal  {background-position: -524px 0;}
			&.icona-sottotitoli  {background-position: -622px 0;}
			&.icona-page  {background-position: -714px 0;}
			&.icona-embed  {background-position: -802px 8px;}

		}
	}


	.content_block_small .panel-skill p {
		font-family: @font-Roboto;
		font-weight: 700;
		text-transform: uppercase;
		color:#001c42;
		padding: 0 10px 10px;
		margin: -5px 0 0 0;
		line-height: 12px;
	}

	p.prenota {
		clear: both;
		a.btn {width: 280px; margin: 0 auto;font-family: @font-Roboto;}
	}

	p span.redspan {
		color: #c20032;
		text-transform: lowercase !important;
	}
}